<template>
  <div class="biz-container">
    <table-layout :isHome="true">
      <template #home>
        <div class="cuslic">
          <div class="cuslic1">
            <div style="height:40px;">
              <search-layout
                :formInfos="q_formInfos"
                :formDatas="q_formDatas"
                message=""
                @onFind="onFind"
              ></search-layout>
            </div>
            <a-list-table
              tableId='supplierTable'
              :columns="columns"
              :tableData="listdata"
              :pagination="pagination"
              size="small"
              :isSelecttion="false"
              :loading="loading"
              :scroll="{y:content1_h-43}"
              @onTableChange="handleTableChange"
              @onselectChange="onselectChange"
              @onAction="onAction"
              @onTouchRow="onTouchRow"
            >
            </a-list-table>
          </div>
          <div class="cuslic2">
            <a-tabs type="card" class="tabs" :animated="true" @change="onchangeTab">
              <a-tab-pane  :key="tabs[0].id" :tab="tabs[0].title">
                <div class="tabs-content"  :style="{height:content2_h+'px'}">
                  <company-license :contentH="content2_h" :supplierRcd="supplierRcd"></company-license>
                  
                </div>
              </a-tab-pane>
              <a-tab-pane  :key="tabs[1].id" :tab="tabs[1].title">
                <div class="tabs-content"  :style="{height:content2_h+'px'}">
                  <regis-license v-if="currentKey==tabs[1].id"  :contentH="content2_h" :supplierRcd="supplierRcd"></regis-license>
                </div>
              </a-tab-pane>
              <a-tab-pane  :key="tabs[2].id" :tab="tabs[2].title">
                <div class="tabs-content"  :style="{height:content2_h+'px'}">
                  <manufacturer-license v-if="currentKey==tabs[2].id" :contentH="content2_h" :supplierRcd="supplierRcd"></manufacturer-license>
                </div>
              </a-tab-pane>
              <a-tab-pane  :key="tabs[3].id" :tab="tabs[3].title">
                <div class="tabs-content"  :style="{height:content2_h+'px'}">
                   <agreement-licese v-if="currentKey==tabs[3].id" :contentH="content2_h" :supplierRcd="supplierRcd"></agreement-licese>
                </div>
              </a-tab-pane>
              <a-tab-pane  :key="tabs[4].id" :tab="tabs[4].title">
                <div class="tabs-content"  :style="{height:content2_h+'px'}">
                   <auth-license v-if="currentKey==tabs[4].id" :contentH="content2_h" :supplierRcd="supplierRcd"></auth-license>
                </div>
              </a-tab-pane>
              
              <!-- <a-tab-pane  v-for="item in tabs" :key="item.id" :tab="item.title">
                <div class="tabs-content"  :style="{height:content2_h+'px'}">
                  <regis-license v-if="currentKey=='2'" :contentH="content2_h" :supplierRcd="supplierRcd"></regis-license>
                  <company-license v-if="currentKey=='1'" :contentH="content2_h" :supplierRcd="supplierRcd"></company-license>
                </div>
              </a-tab-pane> -->
            </a-tabs>
          </div>
        </div>
      </template>
    </table-layout>
  </div>
</template>

<script>
import searchLayout from '@/views/app/biz/common/searchLayout'
import batchOperatBtn from '@/views/app/biz/common/batchOperatBtn'
import tableLayout from '@/views/app/biz/common/index'
import aListInfo from '@/views/app/biz/common/aListInfo'
import aListTable from '@/views/app/biz/common/aListTable'
import regisLicense from './regisLicense/regisLicense.vue'
import companyLicense from './companyLicense/companyLicense.vue'
import manufacturerLicense from './manufacturerLicense/manufacturerLicense.vue'
import agreementLicese from './agreementLicese/agreementLicese.vue'
import authLicense from './authLicense/authLicense.vue'
import { getByConditions, getByConditionsCount, deleteInfo } from '@/views/app/biz/supplier/supplier'
import {columns,q_formInfos,q_formDatas} from './dataConfig'


export default {
  components: {
    searchLayout,
    batchOperatBtn,
    tableLayout,
    aListInfo,
    aListTable,
    regisLicense,
    companyLicense,
    manufacturerLicense,
    agreementLicese,
    authLicense
  },
  data() {
    return {
      currentKey:'1',
      tabs:[
        {id:'0',title:'供应商证照'},
        {id:'1',title:'品种证照'},
        {id:'2',title:'生产厂家证照'},
        {id:'3',title:'合同证照'},
        {id:'4',title:'经销授权书'},
      ],
      columns: columns,
      listdata: [],
      loading: false,
      cellTagClicks: [],
      pagination: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 10, //每页显示条数 pageSize
        total: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['2', '10', '50', '100']
      },
      q_formInfos: q_formInfos,
      q_formDatas: q_formDatas,
      pData: {}, // 条件查询参数
      selectedRowKeys: [],
      selectedRows: [],
      content1_h:null,//上栏content高度
      content2_h:null,//下栏content高度
      supplierRcd:null,//选中的供应商行
    }
  },
  computed: {},
  watch: {
    '$store.state.screenWidth':function(val){ //监听屏幕宽度变化
      // console.log('监听屏幕宽度变化');
      this.setHeight()
    },
    '$store.state.screenHeight':function(val){ //监听屏幕高度变化
      this.setHeight()
    },
  },
  created() {
    this.getTotal()
    this.getList()
  },
  mounted(){
    this.setHeight()
  },
  methods: {
    formatParms(){
      let sbdata=JSON.parse(JSON.stringify(this.q_formDatas))
      for (let key in sbdata) {
        // console.log(key,sbdata[key]);
        if (!sbdata[key]){
          sbdata[key]=null  
        }
        if (key=='gongYingsdm') {
          if (sbdata[key]==null) {
            sbdata[key]=`%%`
          }else{
            sbdata[key]=`%${sbdata[key]}%`
          }
          
        }
      }
      return sbdata
    },
    setHeight(){
      let cuslic1=document.getElementsByClassName("cuslic1")[0]
      let cuslic2=document.getElementsByClassName("cuslic2")[0]
      console.log(cuslic1,cuslic2);
      this.$nextTick(()=>{
        this.content1_h=cuslic1.offsetHeight
        this.content2_h=cuslic2.offsetHeight-50 //50为tabs选项卡高度
        console.log(this.content1_h,this.content2_h);
      })
    },
    onchangeTab(key){
      console.log(key);
      this.currentKey=key
    },
    // 初始化页面时得到总数
    async getTotal() {
      let pages = ''
      pages = await getByConditionsCount(this.formatParms())
      console.log(pages)
      if (pages && pages.code && pages.code === 'C1') {
        const pagination = { ...this.pagination }
        pagination.total = pages.data
        this.pagination = pagination
        this.pagination.showTotal = showTotal => {
          return `共 ${showTotal} 条`
        }
      }
    },
    // 初始化查询时的数据列表
    async getList(params) {
      console.log('请求列表时传入的数据', this.formatParms())
      this.loading = true
      this.listdata = []
      let res = ''
      res = await getByConditions(this.formatParms(), this.pagination)
      this.loading = false
      console.log(res)
      if (res && res.code && res.code === 'C1' && res.data) {
        const resdata = res.data
        for (let item of resdata) {
          this.listdata.push({
            key: item.pid,
            action: ['驳回提醒'],
            ...item
          })
        }
      } else {
        this.listdata = []
      }
      console.log(this.listdata)
      this.loading = false
    },
    // 关闭模态详细框
    handleModalCancel() {},
    // 模态详细框提交按钮
    handleModalSaveOk() {
      this.getList()
    },
    // 操作按钮
    onAction(text, record, index) {
      console.log('点击list中的操作按钮', text, record, index)
      if (text == '编辑') {
        //编辑
        // this.$refs.modal.editModal(record.pid)
        this.$router.push({
          name: 'addNotification',
          params: {
            isJump:false,
            pathName:this.$route.name,
            pid:record.pid,
            type:'edit'
          } 
        })
      }
    },
    onTouchRow(record, index){
      this.supplierRcd=record
    },
    // 触发改变页码,筛选,排序时的回调
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getList()
    },
    // 查询按钮
    onFind() {
      this.pagination.current = 1
      this.getTotal()
      this.getList()
    },
    onTouchCell(text, record, index) {
      this.$refs.viewModal.showModal(record.pid, record)
    },
    onTouchTagCell(text, record, index, col) {
    },
    // 多选批量操作
    onselectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
  }
}
</script>

<style>
.cuslic{
  height: 100%;
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 7px;
}
.cuslic1{
  flex: 2;
  border: 1px solid #eee;
  overflow: auto;
}
.cuslic2{
  flex: 3;
  border: 1px solid #eee;
  overflow: auto;
}
.tabs{
  height: 100%;
}
.ant-tabs-bar{
  margin: 0 0 7px 0px;
}
.tabs-content{
  /* border: 1px solid firebrick; */
  overflow-y: scroll;
}
</style>
